<template>
  <el-table
    :summary-method="summaryMethod"
    :show-summary="showSummary"
    @sort-change="onSortChange"
    class="table-statistics"
    height="100%"
    :data="data"
    ref="table"
    border
  >
    <template v-for="(item, index) in columns">
      <template v-if="item.children && item.children.length">
        <el-table-column
          :label="item.label"
          :width="item.width"
          align="center"
          :key="index"
        >
          <template v-for="(children, cIndex) in item.children">
            <el-table-column
              :sortable="children.sortable"
              :label="children.label"
              :width="children.width"
              :prop="children.prop"
              align="center"
              :key="cIndex"
            >
              <template slot-scope="scope">
                <template v-if="children.slot">
                  <slot
                    :name="children.prop"
                    :column="scope.column"
                    :row="scope.row"
                    :$index="scope.$index"
                  >
                  </slot>
                </template>
                <template v-else>{{ scope.row[scope.column.property] }}</template>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column
          :sortable="item.sortable"
          :label="item.label"
          :width="item.width"
          :prop="item.prop"
          align="center"
          :key="index"
        >
          <template slot-scope="scope">
            <template v-if="item.slot">
              <slot
                :name="item.prop"
                :column="scope.column"
                :row="scope.row"
                :$index="scope.$index"
              >
              </slot>
            </template>
            <template v-else>{{ scope.row[scope.column.property] }}</template>
          </template>
        </el-table-column>
      </template>
    </template>
  </el-table>
</template>

<script>
export default {
  name: "tableStatistics",
  props: {
    // 要展示的数据
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    // 表头
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    // 展示合计列
    showSummary: {
      type: Boolean,
      default: false
    },
    // 自定义的合计计算方法
    summaryMethod: {
      type: Function,
      default: null
    }
  },
  methods: {
    onSortChange(e) {
      this.$emit("sort-change", e);
    },
    resizeListener() {
      if(this.$refs.table) {
        this.$refs.table.doLayout();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-statistics {
  overflow: auto;
  
  /deep/ thead {
    th {
      background: #FAFAFA;
      border-width: 0;
    }
  }

  &.el-table--border {
    border-width: 0;

    /deep/ .el-table__body-wrapper {
      tr {
        td {
          border-bottom-color: rgba(51,51,51,0.08);
          border-right-width: 0;
        }
      }
    }

    &::after,
    &::before {
      width: 0;
    }

    /deep/ .el-table__footer-wrapper {
      td {
        background-color: #F1F1F1;
        border-width: 0;
        color: #333;
      }
    }
  }
}
</style>